<!DOCTYPE html>
<!-- 声明文档使用 HTML5 标准 -->
<html lang="zh-CN">
<head>
    <!-- 设置文档字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置视口，让页面在不同设备上能正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>CSS 浮动详细示例</title>
    <style>
        /* 基本浮动示例 */
        .basic-float-left {
            /* 让元素向左浮动 */
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin-right: 10px;
        }

        .basic-float-right {
            /* 让元素向右浮动 */
            float: right;
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            margin-left: 10px;
        }

        /* 多列布局示例 */
        .multi-column-container {
            /* 给容器设置宽度，方便观察布局 */
            width: 90%;
            margin: 20px auto;
            border: 1px solid #ccc;
        }

        .column {
            /* 每列宽度占容器的 30% */
            width: 30%;
            height: 200px;
            /* 每列左右各有 1.5% 的外边距，三列加起来正好 90%，不会换行 */
            margin: 0 1.5%;
            float: left;
            background-color: lightgreen;
        }

        /* 文字环绕图片示例 */
        .image-wrap {
            /* 图片向左浮动，文字会环绕在其右侧 */
            float: left;
            width: 200px;
            height: 150px;
            margin-right: 10px;
            background-color: lightgray;
        }

        /* 高度塌陷问题示例 */
        .parent-collapse {
            border: 1px solid red;
            /* 由于子元素都浮动，父元素会出现高度塌陷，此时父元素高度为 0 */
        }

        .child-collapse {
            width: 100px;
            height: 100px;
            background-color: lightyellow;
            float: left;
        }

        /* 清除浮动解决高度塌陷问题 */
        .clearfix::after {
            /* 在伪元素中插入空内容 */
            content: "";
            /* 将伪元素设置为块级元素 */
            display: block;
            /* 清除左右两侧的浮动影响 */
            clear: both;
        }

        .parent-fixed {
            border: 1px solid blue;
        }

        .child-fixed {
            width: 100px;
            height: 100px;
            background-color: lightpink;
            float: left;
        }

        /* 清除浮动示例 */
        .float-item {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightseagreen;
            margin-right: 10px;
        }

        .clear-left {
            /* 清除左侧浮动的影响，该元素会显示在浮动元素下方 */
            clear: left;
        }

        .clear-both {
            /* 清除左右两侧浮动的影响，该元素会显示在所有浮动元素下方 */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 基本浮动示例 -->
    <div class="basic-float-left">左浮动</div>
    <div class="basic-float-right">右浮动</div>
    <p>这是一段普通文本，会受到浮动元素的影响，围绕在浮动元素周围显示。</p>

    <!-- 多列布局示例 -->
    <div class="multi-column-container">
        <div class="column">第一列</div>
        <div class="column">第二列</div>
        <div class="column">第三列</div>
        <!-- 使用 clearfix 清除浮动，防止容器高度塌陷 -->
        <div class="clearfix"></div>
    </div>

    <!-- 文字环绕图片示例 -->
    <div class="image-wrap">模拟图片</div>
    <p>这是一段示例文字，会环绕在浮动的图片元素周围。这是一段示例文字，会环绕在浮动的图片元素周围。这是一段示例文字，会环绕在浮动的图片元素周围。</p>

    <!-- 高度塌陷问题示例 -->
    <div class="parent-collapse">
        <div class="child-collapse"></div>
        <div class="child-collapse"></div>
        <!-- 由于子元素浮动，父元素高度塌陷，这里看不到红色边框包含子元素 -->
    </div>

    <!-- 清除浮动解决高度塌陷问题 -->
    <div class="parent-fixed clearfix">
        <div class="child-fixed"></div>
        <div class="child-fixed"></div>
        <!-- 使用 clearfix 清除浮动后，父元素能正确包裹子元素，显示蓝色边框 -->
    </div>

    <!-- 清除浮动示例 -->
    <div class="float-item">浮动元素 1</div>
    <div class="float-item">浮动元素 2</div>
    <p class="clear-left">清除左侧浮动，该段落会显示在浮动元素下方。</p>
    <div class="float-item">浮动元素 3</div>
    <p class="clear-both">清除左右两侧浮动，该段落会显示在所有浮动元素下方。</p>
</body>
</html>
<!--总结
基本浮动：通过 float: left 或 float: right 让元素脱离正常文档流，向左或向右移动。
多列布局：利用浮动使多个元素并排显示，实现多列布局。
文字环绕：图片浮动后，文字会自动环绕在其周围。
高度塌陷：子元素浮动会导致父元素高度塌陷，可使用 clearfix 清除浮动解决。
清除浮动：使用 clear 属性清除浮动元素对后续元素的影响。
​-->



